﻿@{
    ViewBag.Title = "ProgressBar";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Progress Bar</h2>

<canvas id="testCanvas" width="1000" height="750" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var stage;
    var loaderBar;
    var loadInterval;
    var textInterval;
    var LOADER_WIDTH = 900;
    var percentLoaded = 0;
    var text;
    var percent = 0;

    function init() {
        setupStage();
        buildLoaderBar();
        startLoad();
    }
    function setupStage() {
        stage = new createjs.Stage(document.getElementById('testCanvas'));
        createjs.Ticker.addEventListener("tick", runGame);
        createjs.Ticker.setFPS(60);
    }
    function buildLoaderBar() {
        loaderBar = new createjs.Shape();
        loaderBar.x = loaderBar.y = 50;
        loaderBar.graphics.setStrokeStyle(2);
        loaderBar.graphics.beginStroke("#000");
        loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH, 40);
        stage.addChild(loaderBar);

        text = new createjs.Text("0%", "20px Arial", "#00ca00");
        text.x = 900;
        text.y = 150;
        text.textBaseline = "alphabetic";
        stage.addChild(text);
    }
    function updateLoaderBar() {
        loaderBar.graphics.beginFill('#00ca00');
        loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40);
        loaderBar.graphics.endFill();
        loaderBar.graphics.setStrokeStyle(2);
        loaderBar.graphics.beginStroke("#000");
        loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH, 40);
        loaderBar.graphics.endStroke();
    }
    function updateText() {
        if (percent <= 100) {
            percent = parseInt(percentLoaded * 100);
            text.text = percent + "%";
        }
    }
    function startLoad() {
        loadInterval = setInterval(updateLoad, 50);
    }
    function updateLoad() {
        percentLoaded += .005;
        
        updateLoaderBar();
        updateText();

        if (percentLoaded >= 1) {
            clearInterval(loadInterval);
            //stage.removeChild(loaderBar);
        }
    }
    function runGame(e) {
        stage.update();
    }

    window.onload = function () {
        init();
    }
</script>